<template>
  <div id="rainDiv">
    <div v-for="drop in raindrops" :key="drop.id" :style="{ top: drop.y + 'px', left: drop.x + 'px',display: 'flex', flexDirection: 'column',alignItems:'center',justifyContent:'center' }" v-html="drop.char">
    </div>
      <!-- {{ drop.char }} -->
  </div>
</template>

<script>
export default {
  name: "CodeRainComponent",
  data() {
    return {
      characters: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
      raindrops: [],
    };
  },
  methods: {
    initRaindrops() {
      for (let i = 0; i < 100; i++) {
        let char = '';
        const charCount = Math.floor(Math.random() * this.characters.length/2) + 1; 
        for (let j = 0; j < charCount; j++) {
          char += this.characters[Math.floor(Math.random() * this.characters.length)];
        }
        char = char.split('').map((text, index)=>{
          return `<span style="opacity:${index / charCount}">${text}</span>`
        }).join('')
        this.raindrops.push({
          id: i,
          x: Math.random() * window.innerWidth,
          y: -10,
          speed: Math.random() * 3 + 1,
          char: char,
        });
      }
    },
    moveDrops() {
      for (const drop of this.raindrops) {
        drop.y += drop.speed;

        if (drop.y > window.innerHeight) {
          drop.y = -10;
          drop.x = Math.random() * window.innerWidth;
        }
      }
    },
  },
  mounted() {
    this.initRaindrops();
    setInterval(() => {
      this.moveDrops();
    }, 30);
  },
};
</script>

<style scoped>
#rainDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-size: 12px;
}

#rainDiv div {
  position: absolute;
  color: #0f6fb1;
}
</style>